import React, { useRef, useState } from "react";
import { MyMack, MyNavBar } from "../../../components";
import { useNavigate } from "react-router-dom";
import style from "./style.module.scss";
import myIconCamera from "../../../assets/images/icon/common resource/hdpi/my_icon_camera_n.png";
import commonIconClose from "../../../assets/images/icon/common resource/hdpi/common_icon_close_n.png";
import bankCardFront from "../../../assets/images/image/hdpi/bank_card_front.png";

const Index: React.FC = () => {
  const navigate = useNavigate();
  const [dataSrc, setDataSrc] = useState("");
  const input = useRef<HTMLInputElement | null>(null);

  const handleCHange = () => {
    if (input.current && input.current.files) {
      const file = input.current.files[0];

      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.addEventListener("load", () => {
        const result = fileReader.result as string;
        setDataSrc(result);
      });
    }
  };
  return (
    <div className={style.bindBankCard}>
      <input
        type="file"
        style={{ display: "none" }}
        ref={input}
        onChange={(e) => handleCHange()}
      />
      <MyNavBar
        title="绑定银行卡"
        onClickLeft={() => navigate("/set/person/infomation")}
        style={{ backgroundColor: "#fff" }}
      ></MyNavBar>
      <div className={style.bindBankCard_container}>
        <div className={style.figure_box}>
          <img
            src={dataSrc || bankCardFront}
            alt=""
            className={style.backgroundUrl}
          />
          {!dataSrc && (
            <div className={style.uploadBankCard}>
              <img src={myIconCamera} onClick={() => input.current?.click()} />
              <div>点击拍摄/上传银行卡正面</div>
            </div>
          )}
          {dataSrc && (
            <img
              src={commonIconClose}
              alt=""
              className={style.closeIcon}
              onClick={() => setDataSrc("")}
            />
          )}
        </div>
        <button className={style.btn} onClick={() => {
            localStorage.setItem('dataSrc', dataSrc)
            navigate("/set/bind/bank/card/confirm")
        }}>
          下一步
        </button>
      </div>
    </div>
  );
};

export default Index;
